import React, { Component } from 'react'
import Taro from '@tarojs/taro'
import { ScrollView, View, Image, Text } from '@tarojs/components'
import { queyElementYPosition } from '@src/utils/pageUtil'
import imgList from '@components/imgList'

import './index.scss'

class Account extends Component {
  constructor(props) {
    super(props)
    this.state = {
      activeTab: props.actionType
    }
  }

  componentWillReceiveProps (nextProps) {
    if(nextProps.actionType != this.state.activeTab) {
      this.setState({activeTab: nextProps.actionType})
    }
  }

  componentWillUnmount () { }

  componentDidShow () {

  }

  componentDidHide () { }

  /**
   * 日期选择滚动吸顶
   * @param {*} e 
   */
  onPageScroll = (e) =>{
    const { isFixed } = this.state || {}

    queyElementYPosition('#tabPane', this)
      .then((v) => {
        if(v.top < 1 && !isFixed) {
          this.setState({isFixed: true})
        }else if(v.top > 1 && isFixed){
          this.setState({isFixed: false})
        }
      })
      .catch((e) => console.error('query element y position failed.', e))
  }

  hanldeCall = () =>{
    Taro.showToast({title: '拨打电话'})
  }

  onTabChange = (key) =>{
    this.setState({ activeTab: key })
  }

  onMsgChange = (lastId) =>{
    this.setState({scrollIntoId: lastId})
  }

  render () {
    const { activeTab = 0, isFixed } = this.state || {}
    return (
      <View>
        <ScrollView className='accountPage' enableFlex scrollY onScroll={this.onPageScroll}>
          <View className='personInfo'>
            <View className='mainAvatar'>
              <Image src={'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2299227825,2846025458&fm=26&gp=0.jpg'} mode='aspectFit'/>
            </View>
            <View className='nickname'>Messl</View>
            <View className='sign'>君不见黄河之水天上来，奔流到海不复回</View>
            <View className='city'><Image src={imgList.male} mode='aspectFit'/> 江苏 南京</View>
            <View className='infobar'>
              <View className='item'>
                <View className='number'>66</View>
                <View className='label'>关注</View>
              </View>
              <View className='item'>
                <View className='number'>12</View>
                <View className='label'>粉丝</View>
              </View>
              <View className='item'>
              <View className='number'>52</View>
                <View className='label'>动态</View>
              </View>
              <View className='item'>
                <View className='number'>0</View>
                <View className='label'>G币</View>
              </View>
            </View>
          </View>
          <View id='tabPane' className='tabPane'>
            <View className={`talbeBar${isFixed ? ' fixed' : ''}`}>
              <View className={`item left${activeTab == 0 ? ' active' : ''}`} onClick={() =>this.onTabChange(0)}>动态</View>
              <View className={`item right${activeTab == 1 ? ' active' : ''}`} onClick={() =>this.onTabChange(1)}>生涯</View>
            </View>
            <View className={`paneItem${isFixed ? ' paneFixed' : ''}`}>
              {
                activeTab == 0 ? 
                <View>动态</View>
                :
                <View>生涯</View>
              }
            </View>
          </View>
        </ScrollView>
      </View>
    )
  }
}

export default Account

